<template>
	<div class="videoBox">
		<video :style="{'width':screenWidth + 'px','height':screenHeight + 'px'}"
			:src="getImage(info.ShareImage[0].image_url)" :controls="true" :show-center-play-btn="true"
			v-if="info.ShareImage" :poster="getVideoUrl(info.ShareImage[0].image_url)" autoplay
			play-btn-position="center" id="videoId">
		</video>
		 <video src="https://ruomian.oss-cn-chengdu.aliyuncs.com/1641546188275TcZek.mp4" style="width: 200px;height: 200px;" controls></video>
		<!-- 用户信息 -->
		<div class="userInfoBox">
			<div class="userInfo" style="justify-content: space-between;">
				<div style="display: flex;flex-direction: row;align-items: center;">
					<image class="userImage" object-fit="cover" v-if="info.user" :src="getImage(info.user.image_url)" mode=""
						:data-id="info.user.id" @click="toMine"></image>
					<text class="userName" v-if="info.user" style="max-width: 200upx;lines: 1;text-overflow: ellipsis;">{{info.user.username}}</text>
				</div>
				<div v-if="info.shop||info.ShopPackage" @click="toShop" style="display: flex;align-items: center;flex-direction: row;padding: 8upx 16upx;background-color: rgba(0,0,0,.2);">
					<image src="../../../static/mine/shopIcon.png" object-fit="cover" style="width: 36upx;height: 36upx;margin-right: 8upx;"></image>
					<text v-if="info.ShopPackage" style="font-size: 24upx;line-height: 36upx;color: white;max-width: 300upx;lines: 1;text-overflow: ellipsis;">{{info.ShopPackage.name}}</text>
					<text v-if="info.shop&&!info.ShopPackage" style="font-size: 24upx;line-height: 36upx;color: white;max-width: 300upx;lines: 1;text-overflow: ellipsis;">{{info.shop.name}}</text>
				</div>
				<div v-if="info.third_party_title" @click="toWebview" style="display: flex;align-items: center;flex-direction: row;padding: 8upx 16upx;background-color: rgba(0,0,0,.2);">
					<image src="../../../static/mine/shopIcon.png" object-fit="cover" style="width: 36upx;height: 36upx;margin-right: 8upx;"></image>
					<text style="font-size: 24upx;line-height: 36upx;color: white;max-width: 300upx;lines: 1;text-overflow: ellipsis;">{{info.third_party_title}}</text>
				</div>
			</div>
			<div class="introduce">
				<div class="videoTitle">
					<text class="videoTitleT" v-if="info.ShareImage">{{info.title}}</text>
					<text class="open" @click="openBtn" v-if="!isOpen">展开全文</text>
					<text class="open" @click="openBtn" v-if="isOpen">收起</text>
				</div>
				<textarea :class="[isOpen?'openTxt':'introducetxt']"
					v-if="isOpen" disabled v-model="info.content" style="width: 100%;" maxlength="-1"></textarea>
			</div>
		</div>
		<!-- 用户信息 -->
		<!-- 商品详情 -->
		<!-- <div class="commodityBox">
			<image class="leftImage" src="../../../static/index/index_content.png" mode=""></image>
			<div class="BoxRight">
				<div class="titleBox">
					<text class="titleName">创TheChok概念西餐吧(雄峰店)</text>
					<div class="CollectionNum">
						<image class="CollectionIcon" src="../../../static/find/Collection.png" mode=""></image>
						<text class="num">123</text>
					</div>
				</div>
				<text class="commodityType">西餐</text>
				<div class="addressBox">
					<text class="addreesName">钟村街道雄峰城b3座0000-0000</text>
					<text class="distance">2.5km</text>
				</div>
			</div>
		</div> -->
		<!-- 商品详情 -->
		<!-- 底部按钮 -->
		<div class="commentBoxs" v-if="showCommentFlag" :style="{'max-height':screenHeight*0.7+'px'}" style="z-index: 999;" @click.stop="">
			<div class="commentBox" v-if="commentList.length>0">
				<div class="commentItem" v-for="(item,index) in commentList" :key="index">
					<div class="commentImage" :data-id="item.user.id" @click="toMine">
						<image :src="getImage(item.user.image_url)" object-fit="cover" mode="" class="commentImageImg">
						</image>
						<!-- <div :style="{'background-image':'url('+getImage(item.user.image_url)+')'}" :data-id="item.user.id" @click="toMine"></div> -->
					</div>
					<div class="commentCont">
						<div class="commentUser">
							<text class="commentName">{{item.user.username}}</text>
							<div class="likesBox" @click="giveComment" :data-id="item.id" data-type="main" :data-index="index">
								<image src="../../../static/video/collect_act.png" mode=""
									v-if="item.ShareCommentFabulous" class="collectIcon" @click="giveComment" :data-id="item.id" data-type="main" :data-index="index"></image>
								<image src="../../../static/video/collect1.png" mode="" v-else class="collectIcon" @click="giveComment" :data-id="item.id" data-type="main" :data-index="index"></image>
								<text class="likesNum" @click="giveComment" :data-id="item.id" data-type="main" :data-index="index">{{item.fabulous_num}}</text>
							</div>
						</div>
						<text class="commenttext" @longtap="showDel" :data-index="index" data-type="main"
							:data-userid="item.user.id">{{item.content}}</text>
						<div class="commenttime">
							<text class="commenttimeTxt1">{{item.create_time}}</text>
							<text class="commenttimeTxt2" @click="replyComment" :data-index="index" data-type="main">回复</text>
						</div>
		
						<div class="replyBox">
							<div class="replyItem" v-for="(pitem,pindex) in item.sonComment" :key="index">
								<div class="replyImage">
									<image :src="getImage(pitem.user.image_url)" mode="" object-fit="cover" :data-id="pitem.user.id"
										@click="toMine" class="replyImageImg"></image>
								</div>
								<div class="reply_R">
									<div class="replyUser">
										<text class="replyName">{{pitem.user.username}}</text>
										<div class="replyLike" @click="giveComment" :data-id="pitem.id" data-type="son" :data-index="index" :data-pindex="pindex">
											<!-- <u-icon name="heart-fill" color="#FF5555"
												v-if="pitem.ShareCommentReplyFabulous"></u-icon>
											<u-icon name="heart-fill" color="#707070" v-else></u-icon> -->
											<image src="../../../static/video/collect_act.png" mode=""
												v-if="pitem.ShareCommentReplyFabulous" class="collectIcon" @click="giveComment" :data-id="pitem.id" data-type="son" :data-index="index" :data-pindex="pindex"></image>
											<image src="../../../static/video/collect1.png" mode="" v-else class="collectIcon" @click="giveComment" :data-id="pitem.id" data-type="son" :data-index="index" :data-pindex="pindex"></image>
											<text class="replyLikeNum" @click="giveComment" :data-id="pitem.id" data-type="son" :data-index="index" :data-pindex="pindex">{{pitem.fabulous_num}}</text>
										</div>
									</div>
									<text class="replyCont" @longtap="showDel" :data-index="index" :data-pindex="pindex"
										data-type="son" :data-userid="pitem.user.id">{{pitem.content}}</text>
									<div class="replyTime">
										<text class="replyTimeTxt1">{{pitem.create_time}}</text>
										<text class="replyTimeTxt2" @click="replyComment" :data-index="index" :data-pindex="pindex"
											data-type="son">回复</text>
									</div>
								</div>
							</div>
							<text class="more" v-if="item.moreFlag" :data-index="index"
								@click="getReplyList">展开更多回复</text>
						</div>
					</div>
				</div>
			</div>
			<div class="emptyBox" v-else>
				<text>暂无评论</text>
			</div>
		</div>
		<div v-if="showCommentFlag1" style="position: fixed;z-index: 99;bottom: 104upx;left: 0;width: 750upx;height: 80000upx;" @click="toggleComment1"></div>
		
		<div class="bottomBar" ref="tabar">
			<input class="comment" type="text" placeholder="说点什么吧" v-model="commentCont" confirm-type="send"
				@confirm="CommentBtn" focus v-if="replyFlag" />
			<input class="comment" type="text" placeholder="说点什么吧" v-model="commentCont" confirm-type="send"
				@confirm="CommentBtn" v-else />
			<div class="IconBox">
				<div @click="CommentBtn">
					<text class="numBer" @click="CommentBtn">{{replyFlag?'回复':'发送'}}</text>
				</div>
				<div class="IconItem" @click="toCollect">
					<image class="IconImage" src="../../../static/video/collect_act.png" mode=""
						v-if="info.UserShareCollection" @click="toCollect"></image>
					<image class="IconImage" src="../../../static/video/collect.png" mode="" v-else @click="toCollect"></image>
					<text class="numBer" @click="toCollect">收藏</text>
				</div>
				<div class="IconItem" @click="toggleComment">
					<image class="IconImage" src="../../../static/video/evaluate.png" mode="" @click="toggleComment"></image>
					<text class="numBer" @click="toggleComment">评论</text>
				</div>
			</div>
		</div>
		<div style="width: 500upx;background-color: white;position: fixed;bottom: 400upx;left: 100upx;z-index: 9999;border-radius: 20upx;" v-if="jbFlag">
			<textarea value="" placeholder="请输入" style="padding: 30upx;" v-model="explain" />
			<div style="width: 500upx;display: flex;flex-direction: row;align-items: center;border-top: 2upx solid #d0d0d0;">
				<text style="width: 250upx;height: 80upx;line-height: 80upx;text-align: center;font-size: 28upx;color: #D0D0D0;border-right: 2upx solid #d0d0d0;" @click="cancelJb">取消</text>
				<text style="width: 250upx;height: 80upx;line-height: 80upx;text-align: center;font-size: 28upx;color: #333333;" @click="sureJb">确认举报</text>
			</div>
		</div>
		<div class="shareMark" v-if="shareFlag" @click="hideShare"></div>
		<div class="shareCon" v-if="shareFlag">
			<div class="shareItem" @click="shareWeiXin">
				<image src="/static/index/WeChat.png" class="shareItemImg"></image>
				<text class="shareItemTxt">微信好友</text>
			</div>
			<div class="shareItem" @click="savePhoto">
				<image src="/static/index/savePhoto.png" class="shareItemImg"></image>
				<text class="shareItemTxt">保存相册</text>
			</div>
		</div>
		<image class="posterUrl" :src="posterUrl" mode="heightFix" v-if="shareFlag&&posterUrl"></image>
		<!-- 底部按钮 -->
	</div>
</template>

<script>
	// #ifdef APP-NVUE
	const dom = weex.requireModule('dom')
	// #endif
	const app = getApp();
	export default {
		data() {
			return {
				evaluate: "",
				isOpen: false,
				screenWidth: 0,
				shareFlag:false,
				screenHeight: 0,
				id: "",
				info: {},
				commentList: [],
				showCommentFlag: false,
				replyFlag: false,
				commentPage: 1,
				replyPage: 1,
				focusFlag: false,
				replyType: "",
				replyMainIndex: "",
				replySonIndex: "",
				showCommentFlag1:false,
				videoContent:null,
				jbFlag:false,
				explain:"",
				posterUrl:""
			}
		},
		mounted() {
			let _that = this;
			const result = dom.getComponentRect(this.$refs.tabar, option => {
		
				let bottomBarHeight = option.size.height
	
				uni.getSystemInfo({
					success(e) {

						_that.screenWidth = e.windowWidth;
						_that.screenHeight = e.windowHeight - bottomBarHeight;
	
					}
				})
			})
		},
		onUnload() {
			uni.$off("showJb")
			uni.$off("posterShow")
		},
		onLoad(options) {
			uni.$on("showJb",()=>{
				this.jbFlag = true;
			})
			uni.$on("posterShow",(url)=>{
				this.posterUrl = url;
				this.shareFlag = true;
			})
			this.id = options.id;
      console.log("33333333333")
      console.log(this.id);return;

			this.getDetail();
		},
		onNavigationBarButtonTap(){
			uni.showActionSheet({
				itemList:["分享","举报"]
			})
		},
		methods: {
			shareWeiXin(){
				uni.share({
				  provider: "weixin",
				  scene: "WXSceneSession",
				  type: 0,
				  href: "https://www.ruo.shanxiyf.com/appShare.html?type=spnr&nrid="+this.id,
				  title: this.info.title,
				  summary: this.shareStr,
				  imageUrl: "https://ruomian.oss-cn-chengdu.aliyuncs.com/logo108.png",
				  success: function (res) {
				  },
				  fail: function (err) {
				  }
				});
			},
			savePhoto(){
				uni.saveImageToPhotosAlbum({
					filePath: this.posterUrl,
					success: function() {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: "图片已下载至【图库】，请打开【图库】查看", // res.tempFilePath
						});
					},
					fail:err=>{
						console.log(err)
					}
				});
			},
			hideShare(){
				this.shareFlag = false;
			},
			cancelJb(){
				this.jbFlag = false;
			},
			sureJb(){
				let obj = {};
				obj.share_id = this.id;
				obj.content = this.explain;
				app.$vm.getContentDetail(obj,"jbFun").then(res=>{
					this.jbFlag = false;
					this.explain = "";
				})
			},
			toWebview(){
				// #ifdef APP
				uni.navigateTo({
					url:"/pages/pagefive/pages/webView/webView?url="+encodeURIComponent(this.info.third_party_url)
				})
				// #endif
				// #ifdef MP-WEIXIN
				uni.showModal({
					title:"请打开浏览器粘贴后查看详情",
					content:"受系统限制，小程序不支持第三方平台链接跳转。",
					confirmText:"去粘贴",
					success:res=>{
						if(res.confirm){
							uni.setClipboardData({
								data:this.info.third_party_url
							})
						}
					}
				})
				// #endif
			},
			toShop(){
				if(this.info.ShopPackage){
					app.$vm.globalData.shareid = this.info.user_id;
					app.$vm.globalData.tgid = this.info.ShopPackage.id;
					uni.redirectTo({
						url:"/pages/pagethree/pages/OfferDetails/OfferDetails?id="+this.info.ShopPackage.id
					})
				}else if(this.info.shop){
					app.$vm.globalData.shareid = this.info.user_id;
					app.$vm.globalData.mdid = this.info.shop.id;
					uni.redirectTo({
						url:"/pages/pagetwo/pages/FoodDetails/FoodDetails?id="+this.info.shop.id
					})
				}
			},
			replyComment(e){
				console.log(e)
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				let type = e.target.dataset.type || e.currentTarget.dataset.type;
				if(type=='main'){
					this.replyMainIndex = index;
				}else if(type=='son'){
					let pindex = e.target.dataset.pindex || e.currentTarget.dataset.pindex;
					this.replyMainIndex = index;
					this.replySonIndex = pindex;
				}
				this.replyType = type;
				this.replyFlag = true;
			},
			giveComment(e){
				console.log(e)
				let id = e.target.dataset.id || e.currentTarget.dataset.id;
				let type = e.target.dataset.type || e.currentTarget.dataset.type;
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				let obj = {};
				//obj.data = {};
				console.log(type)
				if(type=='main'){
					obj.data.share_id = this.info.id;
					obj.data.share_comment_id = id;
					app.$vm.getContentDetail(obj,"giveCommentMain").then(res=>{
						this.commentList[index].ShareCommentFabulous = 1;
						this.commentList[index].fabulous_num = this.commentList[index].fabulous_num + 1;
						uni.showToast({
							icon:"none",
							title:"点赞成功",
							duration:2000
						})
					})
					
				}else if(type=='son'){
					let pindex = e.target.dataset.pindex || e.currentTarget.dataset.pindex;
					obj.data.share_id = this.info.id;
					obj.data.share_comment_reply_id = id;
					app.$vm.getContentDetail(obj,"giveCommentSon").then(res=>{
						this.commentList[index].sonComment[pindex].ShareCommentReplyFabulous = 1;
						this.commentList[index].sonComment[pindex].fabulous_num = this.commentList[index].sonComment[pindex].fabulous_num + 1;
						uni.showToast({
							icon:"none",
							title:"点赞成功",
							duration:2000
						})
					})
				}
			},
			showDel(e){
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				let type = e.target.dataset.type || e.currentTarget.dataset.type;
				let userid = e.target.dataset.userid || e.currentTarget.dataset.userid;
				if(userid==uni.getStorageSync("userId")){
					uni.showActionSheet({
						itemList:["删除"],
						success:res=>{
							//console.log(res)
							let obj = {};
							if(type=='main'){
								obj.id = this.commentList[index].id;
								this.$u.api.shareCommentDel(obj).then(res=>{
									uni.showToast({
										title:"删除成功",
										icon:'none',
										duration:2000
									})
									this.commentList.splice(index,1)
								})
							}else if(type=='son'){
								let pindex = e.currentTarget.dataset.pindex || e.target.attr.dataPindex
								obj.id = this.commentList[index].sonComment[pindex].id;
								this.$u.api.shareCommentReplyDel(obj).then(res=>{
									uni.showToast({
										title:"删除成功",
										icon:'none',
										duration:2000
									})
									this.commentList[index].sonComment.splice(pindex,1)
								})
							}
						}
					})
				}
			},
			toggleComment() {
				this.showCommentFlag1 = true;
				setTimeout(()=>{
					this.showCommentFlag = !this.showCommentFlag;
				},100)
				
				
			},
			toggleComment1(){
				this.showCommentFlag1 = false;
				this.showCommentFlag = false;
			},
			toCollect() {
				let obj = {};
				if (this.info.UserShareCollection) {
					obj.share_id = this.info.UserShareCollection.share_id;
					console.log(obj)
					app.$vm.getContentDetail(obj, "cancelCollect").then(res => {
						this.getDetail();
					})

				} else {
					obj.share_id = this.info.id;
					console.log(obj)
					app.$vm.getContentDetail(obj, "collectAdd").then(res => {
						//console.log(res)
						this.getDetail();
					})
				}

			},
			toMine(e) {
				console.log(e)
				let id = e.target.dataset.id || e.currentTarget.dataset.id;
				uni.navigateTo({
					url: "/pages/pageone/pages/Business-card/Business-card?id=" + id
				})
			},
			openBtn() {
				this.isOpen = !this.isOpen;
			},
			getVideoUrl(url) {
				return app.$vm.globalData.imgBaseUrl + url + app.$vm.globalData.videoThumb;
			},
			getImage(url) {
				console.log(url)
				if (url && (url.indexOf("http://") != -1 || url.indexOf("https://") != -1)) {
					return url;
				} else {
					return app.$vm.globalData.imgBaseUrl + url;
				}
			},
			getDetail() {
				let obj = {};
				obj.id = this.id;
				obj.dimension = app.$vm.globalData.latitude;
				obj.longitude = app.$vm.globalData.longitude;
				// obj.longitude = uni.getStorageSync("longitude");//117.082094;;
				// obj.dimension = uni.getStorageSync("latitude");//39.987725;
				app.$vm.getContentDetail(obj, "videoDetail").then(res => {
					console.log(res)
					if (uni.getStorageSync("rmToken")) {
						this.info = res.data;
						console.log(this.info)
						this.getCommentList();
						if (this.info.shop) {
							this.info.shop.juli = this.info.shop.juli.toFixed(2);
						}
					} else {
						this.info = res.data;
						console.log(this.info)
						if (this.info.shop) {
							this.info.shop.juli = this.info.shop.juli.toFixed(2);
						}
					}
					console.log(this.info)
					this.$forceUpdate();
				})

			},
			getCommentList() {
				let obj = {};
				obj.share_id = this.info.id;
				obj.page = this.commentPage;
				obj.limit = 10;
				app.$vm.getContentDetail(obj, "commentList").then(res => {
          console.log(res)
          console.log("111111111111111111111111")
					if (this.commentPage == 1) {
						this.commentList = res.data.list.data.map(cur => {
							cur.sonComment = [];
							cur.moreFlag = true;
							cur.replyPage = 0;
							return cur;
						});
					} else {
						this.commentList = this.commentList.concat(res.data.list.data.map(cur => {
							cur.sonComment = [];
							cur.moreFlag = true;
							cur.replyPage = 0;
							return cur;
						}));
					}
				})
			},
			getReplyList(e) {
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				let dataObj = JSON.parse(JSON.stringify(this.commentList[index]));
				dataObj.replyPage = dataObj.replyPage + 1;
				let obj = {};
				obj.page = dataObj.replyPage;
				obj.limit = 10;
				obj.share_comment_id = dataObj.id;
				app.$vm.getContentDetail(obj, "replyList").then(res => {
					if (dataObj.replyPage == 1) {
						dataObj.sonComment = res.data.list.data;
					} else {
						dataObj.sonComment = dataObj.sonComment.concat(res.data.list.data);
					}
					if (dataObj.replyPage < res.data.list.last_page) {
						dataObj.moreFlag = true;
					} else {
						dataObj.moreFlag = false;
					}
					this.commentList.splice(index, 1, dataObj);
				})
			},
			CommentBtn() {
				console.log(this.commentCont)
				if (!this.commentCont.trim()) {
					uni.showToast({
						title:"评论内容不能为空",
						icon:'none',
						duration:2000
					})
					return false;
				}
				if (this.replyFlag) {
					let obj = {};
					obj.share_comment_id = this.commentList[this.replyMainIndex].id;
					obj.content = this.commentCont;
					if (this.replyType == 'main') {
						obj.share_comment_reply_id = 0;
					} else {
						obj.share_comment_reply_id = this.commentList[this.replyMainIndex].sonComment[this.replySonIndex]
							.id;
					}
					app.$vm.getContentDetail(obj, "replyAdd").then(res => {
						uni.showToast({
							title:"回复成功",
							icon:'none',
							duration:2000
						})
						let objs = res.data.data;
						objs.user = {};
						objs.user.id = uni.getStorageSync("rmUser").user_id;
						objs.user.username = uni.getStorageSync("rmUser").username;
						objs.user.image_url = uni.getStorageSync("rmUser").image_url;
						this.replyFlag = false;
						this.commentCont = "";
						this.commentList[this.replyMainIndex].sonComment.unshift(objs);
					})
				} else {
					let obj = {};
					obj.share_id = this.info.id;
					obj.content = this.commentCont;
					app.$vm.getContentDetail(obj, "commentAdd").then(res => {
						uni.showToast({
							title:"评论成功",
							icon:'none',
							duration:2000
						})
						let objs = res.data.data;
						objs.user = {};
						objs.user.id = uni.getStorageSync("rmUser").user_id;
						objs.user.username = uni.getStorageSync("rmUser").username;
						objs.user.image_url = uni.getStorageSync("rmUser").image_url;
						this.replyFlag = false;
						this.commentCont = "";
						this.commentList.unshift(objs);
					})
				}
			}
		}
	}
</script>

<style scoped>
	.shareCon{
		width: 750upx;
		height: 180upx;
		position: fixed;
		left: 0;
		bottom: 0;
		background: white;
		z-index: 1000000;
		box-sizing: border-box;
		padding: 0 70upx;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
	}
	.shareItem{
		// width: 100%;
		/* width: 90upx; */
		height: 180upx;
		box-sizing: border-box;
		padding: 20upx 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
	.shareItemImg{
		width: 90upx;
		height: 90upx;
	}
	.shareItemTxt{
		font-size: 28upx;
		line-height: 28upx;
		color: #3F3F3F;
	}
	.shareMark{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,.5);
		z-index: 999999;
	}
	
	.posterUrl{
		// width: 542upx;
		height: 60%;
		bottom: 212upx;
		left: 50%;
		transform: translateX(-50%);
		position: fixed;
		z-index: 1000000;
	}
	
	
	.commentBoxs {
		width: 750upx;
		/* height: 700upx; */
		position: fixed;
		bottom: 104upx;
		left: 0;
		background: white;
		z-index: 10000;
		padding-bottom: 0;
		overflow-y: auto;
	}

	.commentBox {
		padding: 48upx 24upx;

	}

	.commentImage {
		width: 80upx;
		height: 80upx;
		border-radius: 40upx;
		border-top-left-radius: 40upx;
		border-top-right-radius: 40upx;
		border-bottom-left-radius: 40upx;
		border-bottom-right-radius: 40upx;
		/* overflow: hidden; */
		margin-right: 16upx;
		background-clip:padding-box;
		/* position: relative; */
	}

	.commentImageImg {
		width: 80upx;
		height: 80upx;
		border-radius: 40upx;
		/* background-size: cover;
		/* position: absolute; */
		/* background-position: center; */
	}

	.likesNum {
		font-size: 20upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
		margin-left: 8upx;
	}

	.commentName {
		font-size: 28upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
	}

	.likesBox {
		display: flex;
		align-items: center;
		flex-direction: row;
	}
	
	.collectIcon{
		width: 28upx;
		height: 28upx;
	}

	.commentUser {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;
	}

	.commenttime {
		font-size: 20upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		margin-top: 8upx;
		display: flex;
		align-items: center;
		flex-direction: row;

	}

	.commenttimeTxt1 {
		font-size: 20upx;
		line-height: 20upx;
		color: #999999;
	}

	.commenttimeTxt2 {
		font-size: 20upx;
		line-height: 20upx;
		color: #333333;
		margin-left: 20upx;
	}

	.commenttext {
		font-size: 20upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		margin-top: 16upx;
	}

	.more {
		font-size: 20upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #4C8CCE;
		/* // padding: 16upx 0; */
	}

	.replyImage {
		width: 40upx;
		height: 40upx;
		/* border-radius: 50%; */
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		border-bottom-left-radius: 20upx;
		border-bottom-right-radius: 20upx;
		overflow: hidden;
		margin-right: 16upx;

	}

	.replyImageImg {
		width: 40upx;
		height: 40upx;
		/* border-radius: 50%; */
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		border-bottom-left-radius: 20upx;
		border-bottom-right-radius: 20upx;
	}

	.replyLikeNum {
		font-size: 20upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
		margin-left: 8upx;
	}

	.replyName {
		font-size: 28upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
		line-height: 40upx;
	}

	.replyLike {
		display: flex;
		align-items: center;
		flex-direction: row;
	}

	.replyUser {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 40upx;
		flex-direction: row;
	}

	.replyTime {
		font-size: 20upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		margin-top: 16upx;
		display: flex;
		align-items: center;
		flex-direction: row;
	}

	.replyTimeTxt1 {
		font-size: 20upx;
		line-height: 20upx;
		color: #999999;
	}

	.replyTimeTxt2 {
		font-size: 20upx;
		line-height: 20upx;
		color: #333333;
		margin-left: 20upx;
	}

	.replyCont {
		font-size: 20upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		margin-top: 16upx;
	}

	.reply_R {
		width: 550upx;
	}

	.replyItem {
		display: flex;
		flex-direction: row;
	}

	.replyBox {
		margin-top: 16upx;
		width: 606upx;
	}

	.commentCont {
		width: 606upx;
		height: auto;
	}

	.commentItem {
		display: flex;
		padding-bottom: 16upx;
		border-bottom: 2upx solid #F5F5F5;
		margin-bottom: 16upx;
		flex-direction: row;
	}

	.emptyBox {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 750upx;
		height: 300upx;
	}

	.videoWrap {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
	}

	.userInfoBox {
		position: fixed;
		bottom: 130upx;
		left: 24upx;
		width: 702upx;
		height: auto;
	}

	.userInfo {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.userImage {
		width: 56upx;
		height: 56upx;
		background: rgba(0, 0, 0, 0);
		/* border-radius: 50%; */
		border-top-left-radius: 28upx;
		border-top-right-radius: 28upx;
		border-bottom-left-radius: 28upx;
		border-bottom-right-radius: 28upx;
		opacity: 1;
	}

	.userName {
		font-size: 24upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 40upx;
		color: #FFFFFF;
		margin-left: 16upx;
	}

	.introduce {
		display: flex;
		flex-direction: column;
		margin-top: 24upx;
		/* align-items: center; */
	}

	.videoTitle {
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: space-between;
	}

	.videoTitleT {
		font-size: 28upx;
		font-weight: bold;
		width: 600upx;
		lines: 1;
		text-overflow: ellipsis;
		color: white;
	}

	.openTxt {
		width: 702upx;
		/* height: 62upx; */
		font-size: 24upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		/* line-height: 36upx; */
		color: #D0D0D0;
		margin-top: 24upx;
	}

	.introducetxt {
		width: 702upx;
		/* height: 62upx; */
		font-size: 24upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 36upx;
		color: #D0D0D0;
		lines: 2;
		text-overflow: ellipsis;
		margin-top: 24upx;
	}

	.open {
		color: #3091E6;
		font-size: 26upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		text-align: right;
		padding-right: 30upx;
	}

	.commodityBox {
		position: fixed;
		bottom: 190upx;
		left: 24upx;
		display: flex;
		flex-direction: row;
		width: 702upx;
		height: 144upx;
		background: #3A3A3A;
		opacity: 0.8;
		/* border-radius: 8upx; */
		border-top-left-radius: 8upx;
		border-top-right-radius: 8upx;
		border-bottom-left-radius: 8upx;
		border-bottom-right-radius: 8upx;
		padding: 24upx 16upx;
	}

	.leftImage {
		width: 96upx;
		height: 96upx;
		margin-right: 16upx;
	}

	.BoxRight {
		display: flex;
		justify-content: space-between;
		width: 558upx;
	}

	.titleBox {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.titleName {
		font-size: 24upx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		line-height: 40upx;
		color: #FFFFFF;
	}

	.CollectionNum {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.CollectionIcon {
		width: 24upx;
		height: 24upx;
	}

	.num {
		font-size: 16upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 36upx;
		color: #FFFFFF;
		margin-left: 4upx;
	}

	.commodityType {
		font-size: 20upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 36upx;
		color: #CCCCCC;
		opacity: 1;
		/* margin-top: 18upx; */
	}

	.addressBox {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		/* margin-top: 16upx; */
	}

	.addreesName {
		font-size: 16upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 28upx;
		color: #CCCCCC;
	}

	.distance {
		font-size: 16upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 36upx;
		color: #CCCCCC;
	}

	.controlBox {
		position: fixed;
		top: 667upx;
		left: 375upx;
		transform: translate(-50%, -50%);
		display: flex;
	}

	.videoBtn {
		width: 80upx;
		height: 80upx;
	}

	.pauseBtn {
		width: 100upx;
		height: 100upx;
	}

	.progress-box {
		/* width: 750upx; */
		position: fixed;
		bottom: 120upx;
		left: 0;
		right: 0;
	}

	.process-container {
		position: fixed;
		bottom: 90upx;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 750upx;

	}

	.play-pauseIcon {
		width: 60upx;
		height: 60upx;
	}

	.currtime {
		font-size: 20upx;
		color: #FFFFFF;
		font-weight: 400;
	}

	.slider-container {
		/* width: 750upx; */
		flex: 1;
	}

	.druationTime {
		font-size: 24upx;
		color: #FFFFFF;
		font-weight: 400;
	}

	.Full-screenIcon {
		width: 40upx;
		height: 40upx;
		margin-left: 16upx;
		/* padding: 0 16upx; */
		margin-right: 16upx;
	}

	.bottomBar {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 750upx;
		height: 104upx;
		background: rgba(34, 34, 34, 1);
		padding: 24upx;
		z-index: 999999999;
	}

	.comment {
		width: 320upx;
		height: 56upx;
		background: rgba(250, 250, 250, 1);
		opacity: 1;
		/* border-radius: 28upx; */
		border-top-left-radius: 28upx;
		border-top-right-radius: 28upx;
		border-bottom-left-radius: 28upx;
		border-bottom-right-radius: 28upx;
		padding: 0 32upx;
		font-size: 20upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 34upx;
		color: #333333;
		margin-right: 32upx;
	}

	.IconBox {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		/* width: 382upx; */
		flex: 1;
	}

	.IconItem {
		display: flex;
		align-items: center;
		flex-direction: row;
		/* flex: 1; */
	}

	.IconImage {
		width: 48upx;
		height: 48upx;
		margin-right: 8upx;
	}

	.numBer {
		font-size: 24upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 36upx;
		color: #FFFFFF;
	}
</style>
